<template>
  <div class="pagination-container">
    <el-pagination
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, watch } from 'vue'

const { total, pageSize } = defineProps(['total', 'pageSize'])
const currentPage = ref(1)

const handleCurrentChange = (newPage: number) => {
  currentPage.value = newPage
}

watch(currentPage, (newPage) => {
  console.log('Current Page:', newPage)
})
</script>

<style scoped>
.pagination-container {
  display: flex;
  justify-content: center;
}
</style>
